<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-city" @click="addr()">
          <span>{{ cityName }}</span>
          <img src="../assets/xjt3.png" alt="" class="head-btm"/>
        </div>
        <div class="head-title">
          <img src="../assets/sousuo.png" alt=""/>
          <input type="text" v-model="title" placeholder="请输入职位名称"/>
        </div>
        <div class="head-search" @click="getIndexData()">搜索</div>
      </div>
      <div class="con-top">
        <div>
          <span v-if="status!==1">推荐职位</span>
          <span v-if="status===1">推荐人才</span>
        </div>
        <span class="more" @click="go('/faxian')"
        >更多<img src="../assets/yjt.png" alt=""
        /></span>
      </div>
    </div>
    <!-- 用于分页 -->
    <div class="content" style="overflow: auto;"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="1">

      <!-- 竞价名额 -->  <!--点击查看职位、求职者详情-->
      <div
        class="block"
        v-if="bidList != null"
        v-for="item in bidList"
        @click="goDtl(item)">
        <div class="block-top">
          <span>{{ item.title }}</span>
          <span>{{ item.salaryRange }}</span>
        </div>
        <div class="block-class">
          <span>{{ item.workYearRange }}</span>
          <span>{{ item.eduBgdRange }}</span>
        </div>
        <div class="block-btn">
          <span>{{ item.companyName }}</span>
          <span>{{ item.regionName }}</span>
        </div>
      </div>
      <div v-show="loading===true" class="load">
        <span v-show="loads===true">已经到底了</span>
        <span v-show="loads===false">加载中</span>
      </div>
    </div>
    <div class="footer">
      <div @click="go('/')" class="footer-color">
        <img src="../assets/shouye1.png" alt=""/>
        首页
      </div>

      <div @click="go('/usersFind')" v-if="status != 1">
        <img src="../assets/faxian.png" alt=""/>
        发现
      </div>
      <div @click="go('/companyFind')" v-if="status == 1">
        <img src="../assets/faxian.png" alt=""/>
        发现
      </div>

      <div @click="go('/recommend')" >
        <img src="../assets/tuijian.png" alt=""/>
        推荐
      </div>

      <div @click="go('/usersMy')" v-if="status != 1">
        <img src="../assets/wode.png" alt=""/>
        我的
      </div>
      <div @click="go('/companyMy')" v-if="status == 1">
        <img src="../assets/wode.png" alt=""/>
        我的
      </div>
    </div>
  </div>
</template>

<script>
import {InfiniteScroll} from 'mint-ui'
import companyLoginVue from './company/companyLogin.vue'
import Vue from 'vue'

export default {
  inject: ['reload'],
  name: 'index',
  cityName: '',
  components: {InfiniteScroll},
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getCity()
    this.getIndexData()// 获取页面数据
  },
  mounted () {
    console.log(localStorage.status, "---------");
  },
  // data() 为变量赋值等
  data () {
    return {
      title: '',
      bidList: [

      ],
      recruitList: [

      ],
      status: localStorage.status,
      pageSize: 20,
      pageNum: 0,
      loading: true,
      loads: false
    }
  },
  // methods 编写js函数
  methods: {
    getCity () {
      let cityId = localStorage.getItem('cityId')
      if (cityId == null || cityId.length === 0) {
        localStorage.setItem('cityId', 210200)
        localStorage.setItem('cityName', '大连市')
      }
      this.cityName = localStorage.getItem('cityName')
    },
    loadMore () {
      console.log('loadMore.....')
      if (this.loading === false) {
        this.loading = true
        setTimeout(() => {
          this.pageNum = this.pageNum + 1

          this.getIndexData()
          // alert("开始加载")
        }, 1500)
      }
    },
    getIndexData () { // 获取首页数据
      var that = this
      that.loading = true
      this.$http({
        method: 'get', // 查的时候用get。增删改用post
        // url: "api/index/index",
        url: Vue.prototype.AppURL + '/index/list',
        params: {// 参数传到后端controller里
          page: that.pageNum,
          limit: that.pageSize,
          title: that.title,
          cityId: localStorage.getItem('cityId')// 浏览器缓存localStorage
        }
      })
        .then(({data}) => {
          console.log(data.page);
          // 全部的招聘数据page，（已经包含竞价的了）
          let topList = data.page.topList;
          let entities = data.page.entities;

          that.bidList = that.bidList.concat(topList);
          that.bidList = that.bidList.concat(entities);

        console.log(that.bidList);

          if (that.title != null && that.pageNum == 1) {
            that.recruitList = []
          }
          // 后续根据更新时间list
          that.recruitList = that.recruitList.concat(that.bidList)
          // 判断是否是最后一页
          if (that.bidList.length <= that.pageSize) { // 当查询的总条数小于每页的总条数时候
            that.loading = true// true是不显示
            that.loads = true
          } else {
            // 可以继续上拉更新
            that.loading = false// false是显示
            that.loads = false
          }
        })
    },

    go (r) {
      // if(localStorage.status === 0){
      // 	this.$router.push("/login");
      // }
      // 如果路径为"/",则在本页面不跳转，不做任何事情
      if (r !== '/') { // 如果不是"/"
        console.log('路径:' + r)
        console.log('状态' + localStorage.status)
        if ( // 首先判断status状态，如果为空
          localStorage.status === null ||
          localStorage.status === undefined ||
          localStorage.status === ''
        ) {
          this.$router.push('/usersLogin') // 则跳转usersLogin进行登录
        } else {
          this.$router.push(r) // 如果status不为空，则根据路径正常跳转即可
        }
      }
    },
    goDtl (item) {
      let that = this;
      console.log("==================", item);
      let userId = localStorage.getItem("userId");
      console.log(item, userId);
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/comuser/update/recruit/record',
        params: {
          recruitId: item.id,
          userId: userId,
          recordId: item.recordId
        },
      }).then(function (res) {
        //更新插入缓存，怕造成数据丢失，因为路由每刷新可能会造成数据丢失，部分不用再次查询
        localStorage.setItem('globel_recruitId', item.id);//招聘id
        // JSON 的常规用途是同 web 服务器进行数据交换。在向 web 服务器发送数据时，数据必须是字符串。通过 JSON.stringify() 把 JavaScript 对象或值转换为 JSON 字符串。
        localStorage.setItem('globel_data', JSON.stringify(item));//item本来是对象，存在缓存里得变成json字符串。stringify是json自带的
        // 把参数传递到下一个组件。 路由带参， {recruitId: item.id, data: item}是一个json对象。其中recruitId: item.id招聘id/data: item招聘数据
        that.$router.push({name: 'usersPost', params: {recruitId: item.id, data: item}})
      }).catch(function (err) {
          console.log(err)
      })
    },
    addr () {
      this.$router.push('/addr')
    },
    getData () {
      var that = this
      this.$http({
        method: 'get',
        params: {},
        url: 'api/renren-fast/recruit/ycrecruit/listHome'
        // params: {},
      })
        .then(function (res) {
          console.log(res)
        })
        .catch(function (err) {
          console.log(err)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}

.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}

.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head-btm {
  width: 10px;
}

.head-city {
  font-size: 12px;
  padding-right: 20px;
}

.head-city img {
  margin-left: 5px;
}

.head-title {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 26px;
}

.head-title img {
  width: 14px;
  margin-right: 5px;
}

.head-title input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 12px;
}

::-webkit-input-placeholder {
  font-weight: 100;
}

/* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
}

/* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
}

/* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}

.head-search {
  padding: 0 10px 0 20px;
  font-size: 14px;
}

.content {
  width: 100%;

  padding-bottom: 70px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  top: 84px;
}

.con-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid rgb(248, 248, 248);
}

.con-top div {
  color: #333;
  font-weight: 900;
  font-size: 14px;
}

.more {
  font-size: 12px;
  color: #757575;
  display: flex;
  align-items: center;
}

.more img {
  width: 12px;
}

.block {
  width: 95%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
}

.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.block-top span:first-child {
  color: #333;
  font-weight: 700;
}

.block-top span:last-child {
  color: #3e63a8;
}

.block-calss {
  width: 100%;
}

.block-class span {
  background: #f0f0f0;
  color: #757575;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 10px;
}

.block-company {
  font-size: 12px;
  color: #757575;
}

.block-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}

.load {
  font-size: 12px;
  color: #333;
  padding: 10px 0;
  width: 100%;
  text-align: center;
}
</style>
